<!-- 教师管理 编辑、新增 -->
<template>
  <el-card class="app-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="140px"
      label-suffix=":"
    >
      <el-form-item label="教师名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入教师名称" />
      </el-form-item>
      <!-- <el-form-item label="教师名称" prop="name">
        <el-select v-model="form.name" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="教师资质" prop="certification">
        <el-input-number
          v-model="form.certification"
          :min="1"
          label="请输入教师资质"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="相关证书" prop="credential">
        <picture-upload
          v-model="form.credential"
          :limit="9"
          type="credential"
          path="appliance"
          :multiple="true"
          :value="form.certification"
          :file-list="credentialfileList"
          @del-picture="delCertificate"
          @add-picture="addCertificate"
        ></picture-upload>
      </el-form-item>
      <el-form-item label="教师照片：" prop="photos">
        <picture-upload
          v-model="form.photos"
          type="photos"
          path="appliance"
          :multiple="true"
          :value="form.photos"
          :file-list="photosfileList"
          @del-picture="delPicture"
          @add-picture="addPicture"
        ></picture-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
export default {
  name: "teacherAdd",
  data() {
    return {
      options:[],
      credentialfileList: [],
      photosfileList: [],
      form: {
        name: null,
        certification: null,
        credential: null,
        photos: null,
        institutionId: null,
      },
      rules: {
        name: [{ required: true, message: "请输入教师名称", trigger: "blur" }],
        certification: [{ required: true, message: "请输入教师资质", trigger: "blur" }],
        photos: [{ required: true, message: "请上传教师照片", trigger: "change" }],
        credential: [{ required: true, message: "请上传相关证书", trigger: "change" }]
      },
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 根据用户id查询儿童康复救助机构信息
    getInfo() {
      this.API.deleteRecoveryInstitutionById().then((res) => {
        this.form.institutionId = res.data.id;
      });
    },
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.API.addOrUpdateRecoveryTeacher({ body: this.form })
            .then((res) => {
              this.success("提交成功!");
            })
            .catch((err) => this.warning(err));
        } else {
          return false;
        }
      });
    },
    addPicture(res, field, fileList) {
      this.photosfileList.push(res);
      // console.log("list:", this.photosfileList, this.photosfileList.length);
    },
    delPicture(field,list) {
      this.form[field] = list;
    },

    addCertificate(res, field, fileList) {
      this.certification.push(res);
    },
    delCertificate(field,list) {
      this.form[field] = list;
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  padding-top: 20px;
  padding-right: 50px;

  .el-input {
    width: 400px;
  }

  .el-select {
    width: 300px;
  }
}
</style>
